(function() {
	var option = {
	    title : {
	        text: 'Front-End Knowledge Tree Graph'
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            saveAsImage : {show: true}
	        }
	    },
	    series : [
	        {
	            name:'树图',
	            type:'tree',
	            orient: 'horizontal',  // vertical horizontal
	            rootLocation: {x: 100,y: 320}, // 根节点位置  {x: 100, y: 'center'}
	            nodePadding: 2,
	            layerPadding: 200,
	            hoverable: false,
	            roam: true,
	            symbolSize: 8,
	            itemStyle: {
	                normal: {
	                    color: '#4883b4',
	                    label: {
	                        show: true,
	                        position: 'right',
	                        formatter: "{b}",
	                        textStyle: {
	                            color: '#000',
	                            fontSize: 8
	                        }
	                    },
	                    lineStyle: {
	                        color: '#ccc',
	                        type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

	                    }
	                },
	                emphasis: {
	                    color: '#4883b4',
	                    label: {
	                        show: false
	                    },
	                    borderWidth: 0
	                }
	            },
	            
	            data: []
	        }
	    ]
	};

	var treeData = [
		{
			name: "Web前端知识框架",
			children: [
				{
					name: "运行环境",
					children: [
						{
							name: "浏览器",
							children: [
								{
									name: "浏览器兼容性",
									children: [
										{
											name: "css hack",
											children: []
										},
										{
											name: "javascript 例如事件系统",
											children: []
										},
										{
											name: "渐进增强 优雅降级",
											children: []
										}
									]
								},
								{
									name: "响应式布局",
									children: []
								},
								{
									name: "Web安全",
									children: [
										{
											name: "同源策略",
											children: []
										},
										{
											name: "XSS跨站点攻击",
											children: []
										},
										{
											name: "CSRF跨站点请求伪造",
											children: []
										},
										{
											name: "点击劫持",
											children: []
										},
										{
											name: "SQL注入",
											children: []
										},
										{
											name: "......",
											children: []
										}
									]
								},
								{
									name: "性能优化",
									children: [
										{
											name: "压缩",
											children: []
										},
										{
											name: "CSS Sprites",
											children: []
										},
										{
											name: "合并 减少HTTP请求",
											children: []
										},
										{
											name: "缓存",
											children: []
										},
										{
											name: "CDN",
											children: []
										},
										{
											name: "避免重定向",
											children: []
										},
										{
											name: "......",
											children: []
										}
									]
								}
							]
						},
						{
							name: "Node",
							children: []
						}
					]
				},
				{
					name: "编码开发",
					children: [

					]
				},
				{
					name: "类库框架",
					children: [
						{
							name: "用于浏览器",
							children: [
								{
									name: "jQuery",
									children: [
										{
											name: "常用API",
											children: []
										},
										{
											name: "常用插件",
											children: []
										},
										{
											name: "自制插件",
											children: []
										},
										{
											name: "源码解读 设计思路",
											children: []
										}
									]
								},
								{
									name: "Bootstrap",
									children: [
										{
											name: "常用样式",
											children: []
										},
										{
											name: "常用插件",
											children: []
										},
										{
											name: "衍生框架 如ProUI",
											children: []
										}
									]
								},
								{
									name: "fontAwesome icomoon.io",
									children: []
								},
								{
									name: "requirejs seajs",
									children: []
								},
								{
									name: "Backbone Angular等",
									children: []
								},
								{
									name: "......",
									children: []
								}
							]
						},
						{
							name: "用于NodeJs",
							children: [
								{
									name: "自带模块",
									children: [
										{
											name: "http",
											children: []
										},
										{
											name: "url",
											children: []
										},
										{
											name: "fs",
											children: []
										},
										{
											name: "......",
											children: []
										}
									]
								},
								{
									name: "其他模块",
									children: [
										{
											name: "jquery",
											children: []
										},
										{
											name: "backbone",
											children: []
										},
										{
											name: "express",
											children: []
										},
										{
											name: "......",
											children: []
										}
									]
								}
							]
						}
					]
				},
				{
					name: "理论知识",
					children: [
						{
							name: "硬知识",
							children: [
								{
									name: "HTTP标准",
									children: [
										{
											name: "HTTP请求的过程",
											children: [

											]
										},
										{
											name: "HTTP状态码的意义",
											children: [

											]
										},
										{
											name: "HTTP头部信息",
											children: [

											]
										},
										{
											name: "Cookie状态管理",
											children: [

											]
										},
										{
											name: "方法 GET/POST",
											children: [

											]
										},
										{
											name: "HTTPS",
											children: [

											]
										}
									]
								},
								{
									name: "W3C标准",
									children: [
										{
											name: "HTML HTML5",
											children: [
												{
													name: "HTML",
													children: []
												},
												{
													name: "语义化",
													children: []
												},
												{
													name: "DOM",
													children: []
												},
												{
													name: "2D 3D",
													children: []
												},
												{
													name: "本地存储",
													children: []
												}
											]
										},
										{
											name: "CSS CSS3",
											children: [
												{
													name: "层叠规则",
													children: []
												},
												{
													name: "选择器",
													children: []
												},
												{
													name: "排版",
													children: []
												},
												{
													name: "绘制",
													children: []
												},
												{
													name: "动画",
													children: []
												}
											]
										},
										{
											name: "JavaScript",
											children: [
												{
													name: "DOM API",
													children: []
												},
												{
													name: "BOM API",
													children: []
												},
												{
													name: "事件",
													children: []
												},
												{
													name: "Ajax",
													children: []
												}
											]
										},
										{
											name: "JSON",
											children: [

											]
										},
										{
											name: "XML",
											children: [

											]
										},
										{
											name: "WebSocket",
											children: [

											]
										},
										{
											name: "......",
											children: [

											]
										}
									]
								},
								{
									name: "ECMAScript",
									children: [
										{
											name: "语法",
											children: []
										},
										{
											name: "宿主对象",
											children: []
										},
										{
											name: "原型链 继承",
											children: []
										},
										{
											name: "上下文环境",
											children: []
										},
										{
											name: "作用域 闭包",
											children: []
										},
										{
											name: "正则表达式",
											children: []
										},
										{
											name: "严格模式",
											children: []
										}
									]
								}
							]
						},
						{
							name: "软知识",
							children: [
								{
									name: "设计模式",
									children: [

									]
								},
								{
									name: "面向对象",
									children: [

									]
								},
								{
									name: "算法",
									children: [

									]
								},
								{
									name: "数据结构",
									children: [

									]
								},
								{
									name: "......",
									children: [

									]
								}
							]
						}
					]
				}
			]
		}

	];

	function init() {
		console.log("init");

		var obj = document.getElementById("id_tree_graph");
		if (obj) {
			var mEcharts = echarts.init(obj, 'dark');
			mEcharts.clear();

			option.series[0].data = treeData;
			mEcharts.setOption(option);
		}
	}

	setTimeout(init);
})();